<template>
  <div class="service-container">
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <h3>设备管理</h3>
          <div class="header-right">
            <el-button type="primary" @click="openDialog()" class="add-equipment-btn">
              <el-icon><Plus /></el-icon>添加设备
            </el-button>
            <div class="search-toggle-area">
              <el-button class="search-toggle-button" @click="toggleSearchBar">
                <el-icon><Search /></el-icon>
              </el-button>
              <el-form :inline="true" :model="searchForm" class="search-form" :class="{'is-hidden': !showSearchBar}">
                <div class="search-form-row">
                  <el-form-item label="楼宇">
                    <el-select v-model="searchForm.building_id" placeholder="请选择楼宇" clearable @change="handleBuildingChange" style="width: 150px">
                      <el-option
                        v-for="item in buildingOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="楼层">
                    <el-select v-model="searchForm.floor_id" placeholder="请选择楼层" clearable @change="handleFloorChange" style="width: 150px">
                      <el-option
                        v-for="item in floorOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="房间">
                    <el-select v-model="searchForm.unit_id" placeholder="请选择房间" clearable style="width: 150px">
                      <el-option
                        v-for="item in roomOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="search-form-row">
                  <el-form-item label="设备类型">
                    <el-select v-model="searchForm.device_type" placeholder="请选择设备类型" clearable style="width: 150px">
                      <el-option label="空调" value="空调"></el-option>
                      <el-option label="电梯" value="电梯"></el-option>
                      <el-option label="消防栓" value="消防栓"></el-option>
                      <el-option label="门禁" value="门禁"></el-option>
                      <el-option label="监控" value="监控"></el-option>
                      <el-option label="照明" value="照明"></el-option>
                      <el-option label="水电" value="水电"></el-option>
                      <el-option label="其他" value="其他"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 150px">
                      <el-option label="正常" value="正常"></el-option>
                      <el-option label="故障" value="故障"></el-option>
                      <el-option label="维修中" value="维修中"></el-option>
                      <el-option label="报废" value="报废"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </template>

      <!-- 表格区域 -->
      <div v-loading="loading">
        <el-table
          :data="equipmentList"
          style="width: 100%"
          border
          stripe
          row-key="device_id"
          :header-cell-style="{background:'#f5f7fa', color:'#606266'}"
        >
          <el-table-column
            prop="device_id"
            label="设备ID"
            width="100"
            align="center" header-align="center">
          </el-table-column>
          <el-table-column
            prop="device_type"
            label="设备类型"
            width="120"
            align="center" header-align="center">
          </el-table-column>
          <el-table-column
            prop="device_number"
            label="设备编号"
            width="180"
            align="center" header-align="center">
          </el-table-column>
          <el-table-column
            prop="brand_model"
            label="品牌型号"
            width="150"
            align="center" header-align="center">
          </el-table-column>
          <el-table-column
            prop="location_desc"
            label="位置"
            min-width="210"
            align="center" header-align="center">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            align="center" header-align="center">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" size="small">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="purchase_date"
            label="购买日期"
            width="120"
            align="center" header-align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="180"
            align="center" header-align="center">
            <template #default="scope">
              <el-button @click="viewDetails(scope.row)" type="primary" link>查看</el-button>
              <el-button @click="openDialog(scope.row)" type="primary" link>编辑</el-button>
              <el-popconfirm
                title="确认删除该设备吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleDelete(scope.row)"
              >
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-if="equipmentList.length === 0 && !loading" description="暂无设备数据" class="empty-data-placeholder"></el-empty>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 设备添加/编辑对话框 -->
    <el-dialog :title="dialogType === 'add' ? '添加设备' : '编辑设备'" v-model="dialogVisible" width="650px">
      <el-form :model="equipmentForm" :rules="rules" ref="equipmentFormRef" label-width="120px">
        <el-form-item label="设备类型" prop="device_type">
          <el-select v-model="equipmentForm.device_type" placeholder="请选择设备类型" @change="handleDeviceTypeChange">
            <el-option label="中央空调" value="中央空调"></el-option>
            <el-option label="分体式空调" value="分体式空调"></el-option>
            <el-option label="消防栓" value="消防栓"></el-option>
            <el-option label="智能门禁" value="智能门禁"></el-option>
            <el-option label="智能门锁" value="智能门锁"></el-option>
            <el-option label="监控摄像头" value="监控摄像头"></el-option>
            <el-option label="应急照明灯" value="应急照明灯"></el-option>
            <el-option label="热水器" value="热水器"></el-option>
            <el-option label="饮水机" value="饮水机"></el-option>
            <el-option label="工业排风扇" value="工业排风扇"></el-option>
            <el-option label="烟雾报警器" value="烟雾报警器"></el-option>
            <el-option label="温湿度传感器" value="温湿度传感器"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌型号" prop="brand_model">
           <el-select v-model="equipmentForm.brand_model" placeholder="请选择品牌" filterable>
            <el-option
              v-for="brand in brandOptions"
              :key="brand"
              :label="brand"
              :value="brand">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="equipmentForm.brand_model === '其他'" label="品牌" prop="custom_brand_model">
           <el-input v-model="equipmentForm.custom_brand_model" placeholder="请输入品牌型号"></el-input>
        </el-form-item>
        <el-form-item label="所属楼宇" prop="building_id">
          <el-select v-model="equipmentForm.building_id" placeholder="请选择楼宇" @change="handleBuildingChangeForm" clearable>
            <el-option
              v-for="item in buildingOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属楼层" prop="floor_id">
          <el-select v-model="equipmentForm.floor_id" placeholder="请选择楼层" @change="handleFloorChangeForm" clearable>
            <el-option
              v-for="item in floorOptionsForm"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属房间" prop="unit_id">
          <el-select v-model="equipmentForm.unit_id" placeholder="请选择房间" clearable>
            <el-option
              v-for="item in roomOptionsForm"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="位置描述" prop="location_desc">
          <el-input v-model="equipmentForm.location_desc" placeholder="请输入具体位置描述"></el-input>
        </el-form-item>
        <el-form-item label="购买日期" prop="purchase_date">
          <el-date-picker
            v-model="equipmentForm.purchase_date"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保修期至" prop="warranty_end_date">
          <el-date-picker
            v-model="equipmentForm.warranty_end_date"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="equipmentForm.status" placeholder="请选择状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="故障" value="故障"></el-option>
            <el-option label="维修中" value="维修中"></el-option>
            <el-option label="报废" value="报废"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上次维保日期" prop="last_maintenance_date">
          <el-date-picker
            v-model="equipmentForm.last_maintenance_date"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="维保周期(天)" prop="maintenance_cycle">
          <el-input-number v-model="equipmentForm.maintenance_cycle" :min="0" :max="365"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceList, addDevice, updateDevice, deleteDevice } from '@/api/assets.js'
import { getBuildingList, getBuildingFloors, getFloorRooms } from '@/api/assets.js'
import { Search, Plus } from '@element-plus/icons-vue'

export default {
  name: 'EquipmentList',
  components: {
    Search,
    Plus
  },
  data() {
    return {
      loading: false,
      showSearchBar: false,
      searchForm: {
        building_id: '',
        floor_id: '',
        unit_id: '',
        device_type: '',
        status: ''
      },
      equipmentList: [],
      buildingOptions: [],
      floorOptions: [],
      roomOptions: [],
      floorOptionsForm: [],
      roomOptionsForm: [],
      brandOptions: [],
      dialogVisible: false,
      dialogType: 'add', // add or edit
      equipmentForm: {
        device_id: null,
        device_type: '',
        brand_model: '',
        custom_brand_model: '',
        building_id: '',
        floor_id: '',
        unit_id: '',
        location_desc: '',
        purchase_date: '',
        warranty_end_date: '',
        status: '正常',
        last_maintenance_date: '',
        maintenance_cycle: 90
      },
      rules: {
        device_type: [
          { required: true, message: '请选择设备类型', trigger: 'change' }
        ],
        brand_model: [
          { required: true, message: '请选择或输入品牌', trigger: 'change' }
        ],
        custom_brand_model: [
          { required: true, message: '请输入品牌', trigger: 'blur' }
        ],
        building_id: [
          { required: true, message: '请选择所属楼宇', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择设备状态', trigger: 'change' }
        ]
      },
      total: 0,
      currentPage: 1,
      pageSize: 10,
      deviceCatalog: [
        { type: '中央空调', brands: ['格力', '美的', '大金'] },
        { type: '分体式空调', brands: ['格力', '美的', '海尔'] },
        { type: '智能门禁', brands: ['海康威视', '熵基科技'] },
        { type: '智能门锁', brands: ['小米', '凯迪仕', '德施曼'] },
        { type: '饮水机', brands: ['安吉尔', '沁园'] },
        { type: '工业排风扇', brands: ['Nedfon', '正野'] },
        { type: '烟雾报警器', brands: ['霍尼韦尔', '泛海三江'] },
        { type: '消防栓', brands: ['天广消防', '闽山消防'] },
        { type: '应急照明灯', brands: ['劳士', '敏华'] },
        { type: '监控摄像头', brands: ['海康威视', '大华股份'] },
        { type: '温湿度传感器', brands: ['Lattron', 'SONBEST'] },
        { type: '热水器', brands: ['海尔', 'A.O.史密斯'] }
      ]
    }
  },
  computed: {
    deviceNameOptions() {
      return this.deviceCatalog.map(d => ({ label: d.name, value: d.name }))
    }
  },
  created() {
    this.fetchBuildingOptions()
    this.fetchEquipmentList()
  },
  methods: {
    // 获取楼宇列表(用于下拉)
    async fetchBuildingOptions() {
      try {
        const response = await getBuildingList({ current: 1, size: 999 }) // 获取所有楼宇
        if (response.data.code === 200) {
          this.buildingOptions = response.data.data.list.map(b => ({ value: b.building_id, label: b.name }))
        }
      } catch (error) {
        this.$message.error('获取楼宇选项失败')
      }
    },
    // 获取楼层列表(用于下拉)
    async fetchFloorOptions(buildingId, target = 'search') {
      if (!buildingId) {
        if (target === 'search') this.floorOptions = []
        else this.floorOptionsForm = []
        return
      }
      try {
        const response = await getBuildingFloors(buildingId)
        if (response.data.code === 200) {
          const options = response.data.data.map(f => ({ value: f.id, label: `${f.floorNumber}层` }))
          if (target === 'search') this.floorOptions = options
          else this.floorOptionsForm = options
        }
      } catch (error) {
        this.$message.error('获取楼层选项失败')
      }
    },
    // 获取房间列表(用于下拉)
    async fetchRoomOptions(floorId, target = 'search') {
      if (!floorId) {
        if (target === 'search') this.roomOptions = []
        else this.roomOptionsForm = []
        return
      }
      try {
        const response = await getFloorRooms(floorId)
        if (response.data.code === 200) {
          const options = response.data.data.map(r => ({ value: r.id, label: r.roomNumber }))
           if (target === 'search') this.roomOptions = options
           else this.roomOptionsForm = options
        }
      } catch (error) {
        this.$message.error('获取房间选项失败')
      }
    },
    // 获取设备列表
    async fetchEquipmentList() {
      this.loading = true
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          ...this.searchForm,
          ordering: 'device_id'
        }
        const response = await getDeviceList(params)
        if (response.data.code === 200) {
          this.equipmentList = response.data.data.list
          this.total = response.data.data.total
        }
      } catch (error) {
        this.$message.error('获取设备列表失败')
      } finally {
        this.loading = false
      }
    },
    // 处理楼宇变更 - 搜索栏
    handleBuildingChange(buildingId) {
      this.searchForm.floor_id = ''
      this.searchForm.unit_id = ''
      this.floorOptions = []
      this.roomOptions = []
      this.fetchFloorOptions(buildingId, 'search')
    },
    // 处理楼层变更 - 搜索栏
    handleFloorChange(floorId) {
      this.searchForm.unit_id = ''
      this.roomOptions = []
      this.fetchRoomOptions(floorId, 'search')
    },
    // 表单中处理楼宇变更
    handleBuildingChangeForm(buildingId) {
      this.equipmentForm.floor_id = ''
      this.equipmentForm.unit_id = ''
      this.floorOptionsForm = []
      this.roomOptionsForm = []
      this.fetchFloorOptions(buildingId, 'form')
    },
    // 表单中处理楼层变更
    handleFloorChangeForm(floorId) {
      this.equipmentForm.unit_id = ''
      this.roomOptionsForm = []
      this.fetchRoomOptions(floorId, 'form')
    },
    handleDeviceTypeChange(deviceType) {
      const catalogEntry = this.deviceCatalog.find(d => d.type === deviceType);
      if (catalogEntry) {
        this.brandOptions = [...catalogEntry.brands, '其他'];
      } else {
        this.brandOptions = ['其他']; // Default if type not in catalog
      }
      this.equipmentForm.brand_model = ''; // Reset brand
      this.equipmentForm.custom_brand_model = '';
    },
    // 查询
    handleQuery() {
      this.currentPage = 1
      this.fetchEquipmentList()
    },
    // 重置
    handleReset() {
      this.searchForm = {
        building_id: '',
        floor_id: '',
        unit_id: '',
        device_type: '',
        status: ''
      }
      this.floorOptions = []
      this.roomOptions = []
      this.handleQuery()
    },
    // 页码变更
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchEquipmentList()
    },
    // 每页条数变更
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchEquipmentList()
    },
    // 查看详情
    viewDetails(row) {
      this.$router.push(`/admin/assets/EquipmentDetail/${row.device_id}`)
    },
    // 打开对话框
    openDialog(row) {
      this.dialogVisible = true
      // Nuilding options are already loaded
      this.floorOptionsForm = []
      this.roomOptionsForm = []
      this.$nextTick(() => {
        this.$refs.equipmentFormRef.resetFields()
        if (row && row.device_id) {
          this.dialogType = 'edit'
          
          this.handleDeviceTypeChange(row.device_type)
          
          this.equipmentForm = { ...row, custom_brand_model: '' }

          const catalogEntry = this.deviceCatalog.find(d => d.type === row.device_type)
          const predefinedBrands = catalogEntry ? catalogEntry.brands : []

          if (!predefinedBrands.includes(row.brand_model)) {
            this.equipmentForm.brand_model = '其他'
            this.equipmentForm.custom_brand_model = row.brand_model
          }
          
          if (row.building && row.building.building_id) {
            this.fetchFloorOptions(row.building.building_id, 'form')
          }
          if (row.floor && row.floor.floor_id) {
            this.fetchRoomOptions(row.floor.floor_id, 'form')
          }
        } else {
          this.dialogType = 'add'
          this.equipmentForm = {
            device_id: null,
            device_type: '',
            brand_model: '',
            custom_brand_model: '',
            building_id: '',
            floor_id: '',
            unit_id: '',
            location_desc: '',
            purchase_date: '',
            warranty_end_date: '',
            status: '正常',
            last_maintenance_date: '',
            maintenance_cycle: 90
          }
          this.brandOptions = []
        }
      })
    },
    // 提交表单
    async submitForm() {
      this.$refs.equipmentFormRef.validate(async (valid) => {
        if (valid) {
          const formData = { ...this.equipmentForm };
          if (formData.brand_model === '其他') {
            formData.brand_model = formData.custom_brand_model;
          }
          delete formData.custom_brand_model;

          try {
            if (this.dialogType === 'add') {
              await addDevice(formData)
              this.$message.success('添加成功')
            } else {
              await updateDevice(formData.device_id, formData)
              this.$message.success('编辑成功')
            }
            this.dialogVisible = false
            this.fetchEquipmentList()
          } catch (error) {
            this.$message.error(this.dialogType === 'add' ? '添加失败' : '编辑失败')
          }
        } else {
          return false
        }
      })
    },
    // 删除设备
    async handleDelete(row) {
      try {
        await deleteDevice(row.device_id)
        this.$message.success('删除成功')
        if (this.equipmentList.length === 1 && this.currentPage > 1) {
          this.currentPage--
        }
        this.fetchEquipmentList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    // 获取设备状态类型
    getStatusType(status) {
      const statusMap = {
        '正常': 'success',
        '故障': 'danger',
        '维修中': 'warning',
        '报废': 'danger'
      }
      return statusMap[status] || 'info'
    },
    // 切换搜索栏显示状态
    toggleSearchBar() {
      this.showSearchBar = !this.showSearchBar
    }
  }
}
</script>

<style scoped>
.service-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 80px);
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

/* 搜索区域 */
.search-toggle-area {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.search-toggle-button {
  font-size: 20px;
  color: #606266;
  align-self: center;
  margin-right: 15px;
  transition: all 0.2s;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 10;
  margin-bottom: 0;
}

.search-toggle-button:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.2);
}

.search-form {
  max-width: 1000px;
  width: auto;
  overflow: hidden;
  transition: max-width 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.4s ease-in-out, margin-left 0.4s ease-in-out, height 0.4s ease-in-out, min-height 0.4s ease-in-out;
  opacity: 1;
  background-color: transparent;
  border-radius: 8px;
  padding: 0 20px;
  box-shadow: none;
  pointer-events: auto;
  margin-left: 15px;
  white-space: normal;
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.search-form-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 8px;
}

.search-form.is-hidden {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin-left: 0;
  height: 0;
  min-height: 0;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* 调整搜索表单项的底部外边距 */
:deep(.search-form .el-form-item) {
  margin-bottom: 0;
  margin-right: 15px;
  display: inline-flex;
  align-items: center;
}

:deep(.search-form .el-form-item__label) {
  padding-right: 8px;
}

:deep(.table-card .el-card__header) {
  background-color: #f9fafc;
  padding: 15px 20px;
}

:deep(.table-card .el-card__body) {
  padding: 20px;
}

/* 表格区域样式 */
.table-container {
  min-height: 400px;
}

/* 添加设备按钮样式 */
.add-equipment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* 分页区域 */
.pagination-container {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
  padding: 12px 15px;
  background-color: #f9fbfd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.empty-data-placeholder {
  margin-top: 40px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 搜索框el-input优化 */
:deep(.el-input__inner) {
  border-color: #e0e5ed !important;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}

:deep(.el-input__inner:focus) {
  border-color: rgba(64, 158, 255, 0.4) !important;
}

:deep(.el-input__inner::placeholder) {
  color: #aebccf;
}

/* 按钮el-button优化 */
:deep(.el-button--primary) {
  background-color: rgba(64, 158, 255, 0.1) !important;
  color: #606266 !important;
  border-color: rgba(64, 158, 255, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}

:deep(.el-button--primary:hover) {
  background-color: rgba(64, 158, 255, 0.15) !important;
  border-color: rgba(64, 158, 255, 0.3) !important;
}

/* Default Button */
:deep(.el-button--default) {
  background-color: #ffffff !important;
  color: #606266 !important;
  border-color: #dcdfe6 !important;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}

:deep(.el-button--default:hover) {
  background-color: #f7f9fa !important;
  border-color: #c8d3dd !important;
}

/* Danger Button */
:deep(.el-button--danger) {
  background-color: rgba(245, 108, 108, 0.1) !important;
  color: #F56C6C !important;
  border-color: rgba(245, 108, 108, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}

:deep(.el-button--danger:hover) {
  background-color: rgba(245, 108, 108, 0.15) !important;
  border-color: rgba(245, 108, 108, 0.3) !important;
}

@media screen and (max-width: 768px) {
  .header-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .search-toggle-area {
    width: 100%;
    margin-bottom: 10px;
    justify-content: flex-start;
  }

  .search-form {
    max-width: 100%;
    margin-left: 0;
    padding: 0 10px;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
  }
  
  .search-form-row {
    flex-wrap: wrap;
  }
  
  .search-form.is-hidden {
    height: 0;
    min-height: 0;
    padding: 0;
  }

  :deep(.search-form .el-form-item) {
    margin-right: 0;
    width: 100%;
    margin-bottom: 10px;
  }
}
</style> 